<template>
  <div id="container" :data="data">
    <chartTitle :title="title"></chartTitle>
    <div class="main">
      <div  class="itemBox" v-for="(item, i) in initialDatas" :key="i">
        <div class="itemCenter">
          <p class="p1">{{ item.name }}</p>
          <p class="p2"><countTo :startVal="0" :endVal="item.num || 0" :duration="5000"></countTo></p>
          <img :src="item.ico" :alt="item.name" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    countTo,
    chartTitle,
  },
  name: 'card',
  props: {
    title: String,
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      totalNum: 0,
      initialDatas: [
        { name: '网站告警', key: 'urlNum', num: 0, ico: require('./image/icon1.png') },
        { name: '区域告警', key: 'warnNum', num: 0, ico: require('./image/icon3.png') },
        { name: '商品告警', key: 'goodsNum', num: 0, ico: require('./image/icon4.png') },
        { name: '账户告警', key: 'accountNum', num: 0, ico: require('./image/icon5.png') },
      ]
    }
  },
  watch: {
    data: function (res) {
      if(res && res.length>0) {
        for(let item of res) {
          let obj = this.initialDatas.find(obj=> {return obj.key === item.key})
          if(obj && Object.keys(obj).length>0 && item.num) {
            obj.num = item.num?item.num: 0
          }
        }
        // 计算总数
        this.totalNum = this.countTotal(res, 'num')
      }
    },
  },
  methods: {
    //计算对象数组中某个属性合计
    countTotal(arr, keyName) {
      let $total = 0;
      $total = arr.reduce(function (total, currentValue, currentIndex, arr){
          return currentValue[keyName] ? (total + currentValue[keyName]) : total;
      }, 0);
      return $total;
    }
  },
}
</script>

<style lang="less" scoped>
@keyframes lineMove {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}

#container {
  width: 100%;
  height: 30.4vh;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, 0.2);
  display: flex;
  flex-flow: column;

  .main {
    width: 94%;
    margin: 0 auto;
    margin-top: 2vh;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    .itemBox {
      width: 9vh;
      height: 11.2vh;
      // margin-left: 3.5vh;
      flex: 0 0 45%;
      // flex: 1.5;
      .itemCenter {
        width: 60%;
        margin: 0 auto;
        background-image: url(./image/bg.png);
        background-size: 100% 100%;
      }
      p {
        margin-bottom: 0.2vh;
        text-align: center;
      }
      .p1 {
        font-size: 1vh;
        font-family: 'MicrosoftYaHei';
      }
      .p2 {
        color: #10e4e5;
        font-size: 2.2vh;
        font-family: 'AGENCYFB';
      }
      img {
        width: 3.5vh;
        margin: 0 auto;
        display: block;
      }
      &:nth-of-type(1) {
        margin-top: 1.2vh;
      }
      &:nth-of-type(2) {
        margin-top: 1.2vh;
      }
    }
    .itemBox6 {
      background-image: none;
    }
    .itemBox:nth-child(1),
    .itemBox:nth-child(4) {
      margin-left: 0;
    }
    // .itemBox:nth-child(4),
    // .itemBox:nth-child(5) {
    //   margin-left: 0 !important;
    // }
  }
}
</style>
